<template>
	<div class="Reg">
		<div class="box">
			<div class="lef">
				<p>砼方云</p>
				<p>专业的系统管理平台</p>
			</div>
			<div class="rig">
				<div class="rig_box">
					<div class="rig_box_top">
						<div class="top_Logo">
							<div class="top_Logo_Img">
								<img src="../../assets/images/Tf_nm.png" alt lazy />
							</div>
						</div>
						<div class="header_text">
							<p>账号注册</p>
						</div>
					</div>
					<div class="rig_box_cen">
						<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
							<!-- 账号 -->
							<el-form-item prop="user">
								<el-input prefix-icon="iconfont icon-cc-user" type="text" v-model="ruleForm.user" placeholder="请输入账号" />
							</el-form-item>
							<!-- 密码 -->
							<el-form-item prop="pass">
								<el-input type="password" prefix-icon="iconfont icon-lock" v-model="ruleForm.pass" placeholder="请输入密码"
								 :show-password="true" />
							</el-form-item>
							<!-- 验证码 -->
							<el-form-item prop="verification" class="Yzm">
								<el-input type="text" prefix-icon="iconfont icon-lock" v-model="ruleForm.verification" placeholder="请输入验证码" />
								<!-- <p>yzm</p> -->
							</el-form-item>
						</el-form>
						<div class="Changebottom">
							<p @click="GoLogin()">已有账号前去登录</p>
						</div>
					</div>
					<div class="rig_box_bot">
						<div class="ChangeFooter">
							<div class="Btn">
								<el-button>注册</el-button>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// import {
	// 	setCookie,
	// 	getCookie,
	// 	clearCookie
	// } from "@/components/Cookie.js";
	// import axios from "axios";
	// import Vie from "@/components/View.vue";
	export default {
		name: "Reg",
		data() {
			var validateuser = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入账号"));
				} else {
					callback();
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					callback();
				}
			};
			var validateVerification = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入验证码"));
				} else {
					callback();
				}
			};
			return {
				checked: false,
				num: '',
				ruleForm: {
					pass: "",
					user: "",
					verification: ''
				},
				rules: {
					user: [{
						validator: validateuser,
						trigger: "blur"
					}],
					pass: [{
						validator: validatePass,
						trigger: "blur"
					}],
					verification: [{
						validator: validateVerification,
						trigger: "blur"
					}]
				}
			};
		},
		created() {
			var lett = this;
			document.onkeydown = e => {
				var key = window.event.keyCode;
				if (key == 13) {
					this.submitForm("ruleForm");
				}
			};
			// this.CheckCookeInfo();
		},
		methods: {
			//去登录
			GoLogin() {
				this.$router.push("/Login");
			}
			//点击确定
			// submitForm(formName) {
			//   this.$refs[formName].validate(valid => {
			//     if (valid) {
			//       let URL = "http://192.168.0.24:8214/user/Reg";
			//       let data = {
			//         userName: this.ruleForm.user,
			//         password: this.ruleForm.pass
			//       };
			//       axios.post(URL, data).then(({ data }) => {
			//         if (data.result == "10000001") {
			//           alert(data.msg);
			//         } else {
			//           alert("登录成功");
			//           localStorage.setItem("Token", JSON.stringify(data.data.token));

			//           this.$router.push({
			//             path: "/View",
			//             query: { name: this.ruleForm.user }
			//           });
			//         }
			//       });
			//     } else {
			//       return false;
			//     }
			//   });
			// }
		},
		mounted() {},
		components: {
			// Vie
		}
	};
</script>
<style lang="less">
	.Reg {
		width: 100%;
		height: 100%;
		background: url("../../assets/images/new_bj.jpg") no-repeat center;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.box {
			width: 100%;
			height: 100%;
			display: flex;

			.lef {
				flex: 1;
				padding: 10em 0 0 13rem;
				box-sizing: border-box;

				p {
					width: 100%;
					font-size: 3rem;
					font-weight: 400;
					color: rgba(254, 254, 254, 1);
					margin-top: 3.5rem;
					letter-spacing: 1.2rem;
				}

			}

			.rig {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.rig_box {
					width: 37.5rem;
					height: 53rem;
					background: rgba(255, 255, 255, 1);
					border-radius: 0.6rem;

					.rig_box_top {
						width: 100%;

						.top_header {
							width: 100%;
							display: flex;
							justify-content: flex-end;
						}

						.top_Logo {
							width: 100%;
							display: flex;
							justify-content: center;
							margin: 5.6rem 1.8rem 1rem 1.5rem;

							.top_Logo_Img {
								width: 17.8rem;
								height: 4rem;

								img {
									width: 100%;
									height: auto;
									display: block;
								}
							}
						}

						.header_text {
							width: 100%;
							display: flex;
							justify-content: center;

							p {
								width: 8rem;
								height: 1.7rem;
								font-size: 1.8rem;
								font-weight: 400;
								color: #133173;
								line-height: 1.25rem;
								letter-spacing: 0.2rem;
							}
						}
					}

					.rig_box_cen {
						flex: 1;

						form {
							width: 100%;
							margin-top: 3rem;

							.el-form-item {
								padding: 0 5.3rem;
								box-sizing: border-box;
							}

							.el-form-item__content {
								.iconfont {
									margin: 0 0.8rem 0 1rem;
								}

								>input {
									width: 100%;
									border: 0;
									border-bottom: 0.1rem solid #eee;
									box-shadow: 0;
									text-indent: 0.5em;
								}
							}

							.Yzm {
								width: 100%;
								display: flex;
								>input {
									width: 100%;
									border: 0;
									border-bottom: 0.1rem solid #eee;
									box-shadow: 0;
									text-indent: 0.5em;
								}

							}
						}

						.Changebottom {
							width: 100%;
							font-size: 1.1rem;
							color: #999999;
							display: flex;
							padding: 0 5.3rem;
							box-sizing: border-box;
							justify-content: flex-end;
							margin-top: -1rem;

							>p {
								font-size: 1.1rem;
								color: #999999;
								cursor: pointer;


							}
						}
					}

					.rig_box_bot {
						.ChangeFooter {
							width: 100%;
							margin-top: 1.5rem;
							padding: 0 5.3rem;
							box-sizing: border-box;
							display: flex;
							flex-direction: column;
							align-items: center;

							.Btn {
								width: 17.3rem;
								margin-top: 0.9rem;

								.el-button {
									width: 100%;
									letter-spacing: 0.4rem;
									color: #fff;
									background: #133173;
									border-radius: 2rem;
								}
							}

							.reg {
								width: 17.3rem;
								margin-top: 0.9rem;

								.el-button {
									width: 100%;
									letter-spacing: 0.4rem;
									background: rgba(255, 255, 255, 1);
									border: 0.2rem solid rgba(19, 49, 115, 1);
									border-radius: 2rem;
									color: #133173;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
